import React from "react";
import {createBottomTabNavigator, createStackNavigator, Text,createAppContainer } from "react-navigation";
import Ionicons from "react-native-vector-icons/Ionicons"
import WelcomeHome from "./WelcomeHome";
import HomePage from "./pages/HomePage";
import Telephone from "./pages/Telephone";
import Notice from "./pages/Notice";
import TopView from "./pages/VeteranCadres/TopView";
import TopViewSuccess from "./pages/VeteranCadres/TopView";
import Tdetails from "./pages/VeteranCadres/WorksDisplay/details";
import ArticleListTab from "./pages/VeteranCadres/WorksDisplay/List/ArticleList";
import PictureTab from "./pages/VeteranCadres/WorksDisplay/details/picture";
import ColumnTab from "./pages/VeteranCadres/WorksDisplay/details/column";
import searchTab from "./pages/VeteranCadres/WorksDisplay/common";
import Learningtab from "./navigationPage/Learning";
import panResource from "./navigationPage/panResource";
import createTab from "./navigationPage/PersonalCenter";
import StackViewStyleInterpolator from "react-navigation-stack/src/views/StackView/StackViewStyleInterpolator";
import Tabloid from "./pages/Tabloid/Tabloid"
import NewsBroadcast from "./pages/NewsBroadcast"   //首页的图片新闻详情页面
import Notification from "./pages/NotificationDetails/index";  //通知公告显示的详情页面
let dataList = "首页";
function tapTab(data,index){
    console.log(data);
    switch (index) {
        case 1:
            data.navigation.setParams({
                HomePageData:'首页',
            });
            dataList = "首页";
            break;
        case 2:
            data.navigation.setParams({
                HomePageData:'电话薄',
            });
            dataList = "电话薄";
            break;
        case 3:
            data.navigation.setParams({
                HomePageData:'通知公告',
            });
            dataList = "通知公告";
            break;
        case 4:
            data.navigation.setParams({
                HomePageData:'个人中心',
            });
            dataList = "个人中心";
            break;
    }
    data.navigation.navigate(data.navigation.state.routeName);
}
const BottomTab = createBottomTabNavigator(
    {
        HomePage:{
            screen:HomePage,
            navigationOptions:({ navigation })=>({
                tabBarLabel:"首页",
                tabBarColor:'#ea5947',
                tabBarIcon:({ tintColor,focused }) => (
                    <Ionicons
                        name={focused?'ios-home':'ios-home'}
                        size={26}
                        style={{color:tintColor}}
                    />
                ),
                tabBarOnPress:(obj)=>tapTab(obj,1)
            })
        },
        Telephone:{
            screen:Telephone,
            navigationOptions: {
                tabBarLabel: "电话薄",
                tabBarIcon:({tintColor,focused})=>(
                    <Ionicons
                        name={'md-photos'}
                        size={26}
                        style={{color:tintColor}}
                    />
                ),
                tabBarOnPress:(obj)=>tapTab(obj,2)
            }
        },
        Notice:{
            screen:Notice,
            navigationOptions: {
                tabBarLabel: "通知公告",
                tabBarIcon:({tintColor,focused})=>(
                    <Ionicons
                        name={'md-notifications'}
                        size={26}
                        style={{color:tintColor}}
                    />
                ),
                tabBarOnPress:(obj)=>tapTab(obj,3)
            }
        },
        Personal :{
            screen:createTab ,
            navigationOptions: {
                tabBarLabel: "个人中心",
                tabBarIcon:({tintColor,focused})=>(
                    <Ionicons
                        name={'md-person'}
                        size={26}
                        style={{color:tintColor}}
                    />
                ),
                tabBarOnPress:(obj)=>tapTab(obj,4)
            }
        }
    },{
        backBehavior:'none',
        lazy:false,
        tabBarOptions:{
            activeTintColor:'red',
            style:{
                backgroundColor:'#f8f8f8'
            },
            indicatorStyle:{
                opacity:0
            },
            tabStyle:{
                padding:0
            },
            labelStyle:{
                fontSize:12,
            },

        },
    }
);
const  AppNavigation = createStackNavigator({
        // WelcomeHome:{
        //     screen:WelcomeHome,
        //     navigationOptions:{
        //         header:null,
        //     }
        // },
    BottomTab:{
        screen:BottomTab,
        navigationOptions:({ navigation })=>(
            {
                // title:dataList,
                headerTitle:dataList,
                headerStyle:{
                    backgroundColor:'#d04542',
                    height:50,
                },
                headerTintColor:'white',
                headerTitleStyle: {  //标题信息居中
                    flex:1,
                    textAlign: 'center',
                },
                headerLeft:null,
            }
        )
    },
        Home: {   //首页面
            screen: TopView,
            navigationOptions: { //标题展示
                title:'展示交流',
                headerStyle: { //导航栏的样式
                    backgroundColor: '#d04542',
                    height:50,
                    // borderBottomColor: '#f5a623',
                    // borderBottomWidth: 1,
                },
            },
        },
        Textdetails:{  //文章的详情页面
            screen:Tdetails,
            navigationOptions:{
                headerTitle: "详情页面",
            }
        },
        ArticleList:{  //文章的详情页面
            screen:ArticleListTab,
            navigationOptions:{
            }
        },
        picture:{   //图片的详情页面
            screen:PictureTab,
            navigationOptions:{
                headerTitle:"详情页面",
            }
        },
        column:{  //栏目详情页面制作
            screen:ColumnTab,
        },
        search:{  //搜索的详情页面展示
            screen:searchTab,
            navigationOptions:{
                header:null,
            }
        },
    StudentD:{
        screen:TopViewSuccess,
    },
        Tabloid:{
            screen:Tabloid,
        },  //首页的图片新闻显示
        NewsBroadcast:{  //首页的图片新闻的详情页面展示
            screen:NewsBroadcast
            ,
        },
        Notification:{   //点击通知公告显示的详情页面
            screen:Notification,
        },
    ...Learningtab,  //学习教育
    ...panResource,  //小潘
    },
    {
        // defaultNavigationOptions: {
        //     gesturesEnabled: true,
        // },
        cardShadowEnabled:false,
        navigationOptions: ({ navigation })=>(
            { //配置顶部导航
                headerTitleStyle: { //导航栏文字的样式
                    fontSize: 18,
                    tintColor:'white',
                },
                headerBackTitleStyle: {    //‘返回’文字的样式
                    color:'white',
                },
                headerStyle: { //导航栏的样式
                    backgroundColor: '#d04542',
                    color:'red',
                    height:50,
                },
                gesturesEnabled:true,
                gestureResponseDistance:{               //定义手势响应距离屏幕边界的距离
                    horizontal:300,
                    vertical:50
                }
            }
        ),
        transitionConfig:()=>({
            screenInterpolator: StackViewStyleInterpolator.forHorizontal
        }),
    }
);

const AppTab = createAppContainer(AppNavigation);
export default AppTab;